<template>
  <div class="audit-container">
    <el-table :data="filterList[page - 1]" :default-sort="{ prop: 'date', order: 'ascending' }">
      <el-table-column label="#" type="index"></el-table-column>
      <el-table-column label="职工姓名" prop="name"></el-table-column>
      <el-table-column label="当前权限">
        <template #default="{ row }">
          <div>
            {{ row.role | roleFormat }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="申请权限">
        <template #default="{ row }">
          <div>
            {{ row.apply_role | roleFormat }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="date" label="申请时间" sortable>
        <template #default="{ row }">
          <div>
            {{ row.date | dateFormat }}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="申请状态"
        :filters="[
          { text: '未审核', value: 0 },
          { text: '已批准', value: 1 },
          { text: '已驳回', value: 2 },
        ]"
        :filter-method="filterHandler"
      >
        <template #default="{ row }">
          <div :style="row.apply_status === 0 ? 'color: #25b0f3' : row.apply_status === 1 ? 'color: green' : 'color: red'">
            {{ row.apply_status | statusFormat }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="{ row }">
          <div>
            <el-button type="primary" @click="audit(row.id, 0)">批准</el-button>
            <el-button type="danger" @click="audit(row.id, 1)">驳回</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="1" :page-sizes="[5, 10, 15, 20]" :page-size="5" layout="total, sizes, prev, pager, next, jumper" :total="roleApplyList.length"> </el-pagination>
  </div>
</template>

<script>
import bus from '@/components/bus'
export default {
  name: 'Audit',
  data() {
    return {
      roleApplyList: [],
      limit: 5,
      page: 1,
    }
  },
  created() {
    this.getRoleApplyList()
  },
  methods: {
    async getRoleApplyList() {
      const { data: res } = await this.$http.get('/api/role/roleapplylist')
      if (res.status === 1) return this.$message(res.message)
      this.roleApplyList = res
    },
    async audit(id, type) {
      const { data: res } = await this.$http.post('/api/role/audit/' + id + '/' + type)
      if (res.status === 1) return this.$message.error(res.message)
      this.$message.success(res.message)
      this.getRoleApplyList()
      bus.$emit('updateRoleList')
    },
    handleSizeChange(val) {
      this.limit = val
    },
    handleCurrentChange(val) {
      this.page = val
    },
    chunk(array, size) {
      const length = array.length
      if (!length || !size || size < 1) {
        return []
      }
      let index = 0 //用来表示切割元素的范围start
      let resIndex = 0 //用来递增表示输出数组的下标
      let result = new Array(Math.ceil(length / size))
      while (index < length) {
        result[resIndex++] = array.slice(index, (index += size))
      }
      return result
    },
    filterHandler(value, row, column) {
      return row.apply_status === value
    },
  },
  computed: {
    filterList() {
      return this.chunk(this.roleApplyList, this.limit)
    },
  },
  filters: {
    dateFormat(date) {
      var dt = new Date(date)
      var y = dt.getFullYear()
      var m = dt.getMonth() + 1
      var d = dt.getDate()
      var h = dt.getHours()
      var mm = dt.getMinutes()
      var s = dt.getSeconds()
      return `${y}-${m}-${d} ${h}:${mm}:${s}`
    },
    statusFormat(status) {
      if (status === 0) return '未审核'
      if (status === 1) return '已批准'
      if (status === 2) return '已驳回'
    },
  },
}
</script>

<style lang="less" scoped>
.el-pagination {
  margin: 30px 0 0 970px;
}
</style>
